<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_浮动_简介</title>
    <style>
        div {
            width: 600px;
            height: 400px;
            background-color: skyblue;
        }

        img {
            width: 200px;
            float: right;
            margin-left: 0.5em;
        }

        .test::first-letter {
            font-size: 80px;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/我的自拍.jpg" alt="">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque expedita numquam porro exercitationem magni
        at sed sunt, ea beatae nihil dolor tempore quidem aut explicabo, perspiciatis quasi sequi. Beatae ea ex omnis
        accusamus tempora, blanditiis temporibus aspernatur, magnam cupiditate fuga itaque assumenda reiciendis et
        pariatur deserunt cumque, suscipit iste totam necessitatibus eveniet? Nisi exercitationem minima deleniti
        tempora laboriosam sed. Doloribus vel commodi corrupti rem. Architecto repellat, incidunt officia dolores
        ducimus accusamus. Ipsum earum natus, vitae blanditiis nesciunt illum at quo quis sunt, reiciendis beatae
        reprehenderit? Saepe libero inventore sint, rem non quae eos! Quaerat dolor placeat consequatur deserunt tempora
        architecto!
    </div>
    <hr>
    <div class="test">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore aliquid blanditiis dolor ad fuga, hic
        molestias facere porro et dolorem cum id, molestiae voluptate adipisci asperiores dolore suscipit nulla vel
        recusandae. Ipsa neque quis omnis iure accusamus harum velit atque, debitis quos suscipit autem fugiat tempora
        voluptate nostrum sapiente. Non cupiditate saepe quis et ex vero illum quod commodi recusandae quibusdam
        corrupti, consequatur tempora nulla est debitis impedit perspiciatis similique porro expedita, molestiae ipsam,
        atque voluptatum. In, amet! Autem modi rerum fugit eum iste magnam maxime? Velit repudiandae magni minima
        nesciunt eveniet nemo quam eligendi, porro quasi consequuntur, incidunt nobis.
    </div>
</body>

</html>